<template>
    <div v-loading="loading">
        <p style="color: red;font-size: 12px;">带分页、条件筛选</p>

        <el-form ref="tableform" class="click-table2-form" size="mini" :inline="true" :model="formData">
            <el-form-item label="名字" prop="name">
                <el-input v-model="formData.name" placeholder="名字"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-input v-model="formData.role" placeholder="请输入角色"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="formData.sex" placeholder="性别">
                    <el-option v-for="(item, index) in sexList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchEvent">查询</el-button>
                <el-button @click="$refs.tableform.resetFields()">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="click-table2-oper">
            <el-button type="success" size="mini" @click="insertEvent">新增</el-button>
            <el-button type="danger" size="mini" @click="pendingRemoveEvent">标记/取消删除</el-button>
            <el-button type="danger" size="mini" @click="deleteSelectedEvent">删除选中</el-button>
            <el-button type="warning" size="mini" @click="submitEvent">保存</el-button>
            <el-button type="success" size="mini" @click="exportCsvEvent">导出</el-button>
        </div>

        <elx-editable
                ref="elxEditable"
                class="click-table2"
                border
                height="466"
                size="small"
                :default-sort="{prop: 'updateTime', order: 'descending'}"
                :data.sync="list"
                :row-class-name="tableRowClassName"
                :edit-config="{trigger: 'click', mode: 'row'}"
                style="width: 100%">
            <elx-editable-column type="selection" width="55"></elx-editable-column>
            <elx-editable-column prop="id" label="ID" width="80"></elx-editable-column>
            <elx-editable-column prop="name" label="名字" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></elx-editable-column>
            <elx-editable-column prop="sex" label="性别" sortable :filters="[{text: '男', value: '1'}, {text: '女', value: '0'}]" :filter-method="filterHandler" :edit-render="{name: 'ElSelect', options: sexList}"></elx-editable-column>
            <elx-editable-column prop="age" label="年龄" :edit-render="{name: 'ElInputNumber', props: {min: 1, max: 200}}"></elx-editable-column>
            <elx-editable-column prop="region" label="地区" width="200" :edit-render="{name: 'ElCascader', props: {options: regionList, showAllLevels: false}}"></elx-editable-column>
            <elx-editable-column prop="role" label="角色" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></elx-editable-column>
            <elx-editable-column prop="describe" label="文本域" show-overflow-tooltip :edit-render="{name: 'ElInput', props: {type: 'textarea', autosize: {minRows: 1, maxRows: 4}}}"></elx-editable-column>
            <elx-editable-column prop="date" label="日期" sortable :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd'}}"></elx-editable-column>
            <elx-editable-column prop="flag" label="是否启用" :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
            <elx-editable-column prop="updateTime" label="更新时间" sortable width="160" :formatter="formatterDate"></elx-editable-column>
            <elx-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></elx-editable-column>
            <elx-editable-column prop="attr3" label="链接">
                <template>
                    <a href="https://github.com/xuliangzhan/vue-element-extends" target="_blank">打开链接</a>
                </template>
            </elx-editable-column>
            <elx-editable-column label="操作" width="100">
                <template v-slot="scope">
                    <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
                </template>
            </elx-editable-column>
        </elx-editable>

        <el-pagination
                class="click-table2-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageVO.currentPage"
                :page-sizes="[5, 10, 15, 20, 50, 100, 150, 200]"
                :page-size="pageVO.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageVO.totalResult">
        </el-pagination>
    </div>
</template>

<script>
    import Vue from 'vue';
    import XEUtils from 'xe-utils';
    import XEAjax from 'xe-ajax';
    import { MessageBox, Message, Button, Form,FormItem } from 'element-ui';

    import VueElementExtends from 'vue-element-extends';
    import 'vue-element-extends/lib/index.css';

    Vue.config.productionTip = false;

    Vue.use(VueElementExtends);
    Vue.use(Button);
    Vue.use(Form);
    Vue.use(FormItem);

    export default {
        data () {
            return {
                loading: false,
                sexList: [{'label':'男','spell':'nan','value':'1','value2':1,'val':'x'},{'label':'女','spell':'nv','value':'0','value2':0,'val':'o'}],
                regionList:[{'value':1,'label':'北京','children':[{'value':1,'label':'北京市','children':[{'value':1,'label':'东城区'},{'value':2,'label':'西城区'},{'value':3,'label':'崇文区'},{'value':4,'label':'宣武区'},{'value':5,'label':'朝阳区'},{'value':6,'label':'丰台区'},{'value':7,'label':'石景山区'},{'value':8,'label':'海淀区'},{'value':9,'label':'门头沟区'},{'value':10,'label':'房山区'},{'value':11,'label':'通州区'},{'value':12,'label':'顺义区'},{'value':13,'label':'昌平区'},{'value':14,'label':'大兴区'},{'value':15,'label':'怀柔区'},{'value':16,'label':'平谷区'},{'value':17,'label':'密云县'},{'value':18,'label':'延庆县'}]}]},{'value':9,'label':'上海','children':[{'value':73,'label':'上海市','children':[{'value':719,'label':'黄浦区'},{'value':720,'label':'卢湾区'},{'value':721,'label':'徐汇区'},{'value':722,'label':'长宁区'},{'value':723,'label':'静安区'},{'value':724,'label':'普陀区'},{'value':725,'label':'闸北区'},{'value':726,'label':'虹口区'},{'value':727,'label':'杨浦区'},{'value':728,'label':'闵行区'},{'value':729,'label':'宝山区'},{'value':730,'label':'嘉定区'},{'value':731,'label':'浦东新区'},{'value':732,'label':'金山区'},{'value':733,'label':'松江区'},{'value':734,'label':'青浦区'},{'value':735,'label':'南汇区'},{'value':736,'label':'奉贤区'},{'value':737,'label':'崇明县'}]}]},{'value':19,'label':'广东','children':[{'value':197,'label':'广州市','children':[{'value':1747,'label':'东山区'},{'value':1748,'label':'荔湾区'},{'value':1749,'label':'越秀区'},{'value':1750,'label':'海珠区'},{'value':1751,'label':'天河区'},{'value':1752,'label':'芳村区'},{'value':1753,'label':'白云区'},{'value':1754,'label':'黄埔区'},{'value':1755,'label':'番禺区'},{'value':1756,'label':'花都区'},{'value':1757,'label':'增城市'},{'value':1758,'label':'从化市'}]},{'value':198,'label':'韶关市','children':[{'value':1759,'label':'武江区'},{'value':1760,'label':'浈江区'},{'value':1761,'label':'曲江区'},{'value':1762,'label':'始兴县'},{'value':1763,'label':'仁化县'},{'value':1764,'label':'翁源县'},{'value':1765,'label':'乳源瑶族自治县'},{'value':1766,'label':'新丰县'},{'value':1767,'label':'乐昌市'},{'value':1768,'label':'南雄市'}]},{'value':199,'label':'深圳市','children':[{'value':1769,'label':'罗湖区'},{'value':1770,'label':'福田区'},{'value':1771,'label':'南山区'},{'value':1772,'label':'宝安区'},{'value':1773,'label':'龙岗区'},{'value':1774,'label':'盐田区'}]},{'value':200,'label':'珠海市','children':[{'value':1775,'label':'香洲区'},{'value':1776,'label':'斗门区'},{'value':1777,'label':'金湾区'}]},{'value':201,'label':'汕头市','children':[{'value':1778,'label':'龙湖区'},{'value':1779,'label':'金平区'},{'value':1780,'label':'濠江区'},{'value':1781,'label':'潮阳区'},{'value':1782,'label':'潮南区'},{'value':1783,'label':'澄海区'},{'value':1784,'label':'南澳县'}]},{'value':202,'label':'佛山市','children':[{'value':1785,'label':'禅城区'},{'value':1786,'label':'南海区'},{'value':1787,'label':'顺德区'},{'value':1788,'label':'三水区'},{'value':1789,'label':'高明区'}]},{'value':203,'label':'江门市','children':[{'value':1790,'label':'蓬江区'},{'value':1791,'label':'江海区'},{'value':1792,'label':'新会区'},{'value':1793,'label':'台山市'},{'value':1794,'label':'开平市'},{'value':1795,'label':'鹤山市'},{'value':1796,'label':'恩平市'}]},{'value':204,'label':'湛江市','children':[{'value':1797,'label':'赤坎区'},{'value':1798,'label':'霞山区'},{'value':1799,'label':'坡头区'},{'value':1800,'label':'麻章区'},{'value':1801,'label':'遂溪县'},{'value':1802,'label':'徐闻县'},{'value':1803,'label':'廉江市'},{'value':1804,'label':'雷州市'},{'value':1805,'label':'吴川市'}]},{'value':205,'label':'茂名市','children':[{'value':1806,'label':'茂南区'},{'value':1807,'label':'茂港区'},{'value':1808,'label':'电白县'},{'value':1809,'label':'高州市'},{'value':1810,'label':'化州市'},{'value':1811,'label':'信宜市'}]},{'value':206,'label':'肇庆市','children':[{'value':1812,'label':'端州区'},{'value':1813,'label':'鼎湖区'},{'value':1814,'label':'广宁县'},{'value':1815,'label':'怀集县'},{'value':1816,'label':'封开县'},{'value':1817,'label':'德庆县'},{'value':1818,'label':'高要市'},{'value':1819,'label':'四会市'}]},{'value':207,'label':'惠州市','children':[{'value':1820,'label':'惠城区'},{'value':1821,'label':'惠阳区'},{'value':1822,'label':'博罗县'},{'value':1823,'label':'惠东县'},{'value':1824,'label':'龙门县'}]},{'value':208,'label':'梅州市','children':[{'value':1825,'label':'梅江区'},{'value':1826,'label':'梅县'},{'value':1827,'label':'大埔县'},{'value':1828,'label':'丰顺县'},{'value':1829,'label':'五华县'},{'value':1830,'label':'平远县'},{'value':1831,'label':'蕉岭县'},{'value':1832,'label':'兴宁市'}]},{'value':209,'label':'汕尾市','children':[{'value':1833,'label':'城区'},{'value':1834,'label':'海丰县'},{'value':1835,'label':'陆河县'},{'value':1836,'label':'陆丰市'}]},{'value':210,'label':'河源市','children':[{'value':1837,'label':'源城区'},{'value':1838,'label':'紫金县'},{'value':1839,'label':'龙川县'},{'value':1840,'label':'连平县'},{'value':1841,'label':'和平县'},{'value':1842,'label':'东源县'}]},{'value':211,'label':'阳江市','children':[{'value':1843,'label':'江城区'},{'value':1844,'label':'阳西县'},{'value':1845,'label':'阳东县'},{'value':1846,'label':'阳春市'}]},{'value':212,'label':'清远市','children':[{'value':1847,'label':'清城区'},{'value':1848,'label':'佛冈县'},{'value':1849,'label':'阳山县'},{'value':1850,'label':'连山壮族瑶族自治县'},{'value':1851,'label':'连南瑶族自治县'},{'value':1852,'label':'清新县'},{'value':1853,'label':'英德市'},{'value':1854,'label':'连州市'}]},{'value':213,'label':'东莞市','children':[]},{'value':214,'label':'中山市','children':[]},{'value':215,'label':'潮州市','children':[{'value':1855,'label':'湘桥区'},{'value':1856,'label':'潮安县'},{'value':1857,'label':'饶平县'}]},{'value':216,'label':'揭阳市','children':[{'value':1858,'label':'榕城区'},{'value':1859,'label':'揭东县'},{'value':1860,'label':'揭西县'},{'value':1861,'label':'惠来县'},{'value':1862,'label':'普宁市'}]},{'value':217,'label':'云浮市','children':[{'value':1863,'label':'云城区'},{'value':1864,'label':'新兴县'},{'value':1865,'label':'郁南县'},{'value':1866,'label':'云安县'},{'value':1867,'label':'罗定市'}]}]}],
                list: [{'id':109,'name':'name_108','nickname':'名字_108','password':'GgDaBbCAE','sex':'0','role':'前端','region':[9,73,719],'email':'dbbbfcaeaeffgegc@163.com','age':26,'rate':5,'flag':false,'phone':'13651389655','describe':'用用','describe2':'信户信户息用用','describe3':'信户户息信户用户','seq':108,'date':1548101949338,'createTime':1548629844131,'updateTime':1550661568446,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':167,'name':'name_166','nickname':'昵称_166','password':'CFfEDgdcbAB','sex':'0','role':'项目经理','region':[19,199,1773],'email':'cfaagecdbbbfdcgfed@qq.com','age':21,'rate':1,'flag':false,'phone':'13661647851','describe':'息户信','describe2':'信信息户用用','describe3':'户息息息用信用信信用','seq':166,'date':1548187643256,'createTime':1549781573682,'updateTime':1550636990019,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':324,'name':'name_323','nickname':'名字_323','password':'AgDcBfb','sex':'1','role':'后端','region':[9,73,719],'email':'cbgecedffbafd@qq.net','age':27,'rate':0,'flag':true,'phone':'13626859441','describe':'信户息户用','describe2':'用息息户信','describe3':'户息息用户信信信用息户信户用','seq':323,'date':1549533002650,'createTime':1548891045544,'updateTime':1550629744517,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':52,'name':'test_51','nickname':'名字_51','password':'dACEbfgDFeGB','sex':'0','role':'设计','region':[19,199,1773],'email':'fbcgdedeafbcacd@163.net','age':28,'rate':4,'flag':true,'phone':'13616182248','describe':'信用用','describe2':'信用息户户用用','describe3':'户息户户信息息息信','seq':51,'date':1546530510232,'createTime':1546583850926,'updateTime':1550619742609,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':132,'name':'name_131','nickname':'昵称_131','password':'DFbBfdeCEca','sex':'0','role':'后端','region':[1,1,5],'email':'dfcfbbgacebe@qq.com','age':25,'rate':4,'flag':false,'phone':'13658154149','describe':'户信户用','describe2':'信息用用用户息信','describe3':'信户息息户用用信息息户用信用户','seq':131,'date':1547223042974,'createTime':1549442771886,'updateTime':1550594838684,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':130,'name':'name_129','nickname':'名字_129','password':'efFDdcEB','sex':null,'role':'项目经理','region':[19,199,1773],'email':'eaagbfad@qq.net','age':22,'rate':0,'flag':true,'phone':'13661116284','describe':'用息信户','describe2':'用信户户息息户信用','describe3':'息户户息信用息信信信息户息户信户用','seq':129,'date':1546935320999,'createTime':1547399346413,'updateTime':1550586434755,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':174,'name':'name_173','nickname':'名字_173','password':'fAgbFaecB','sex':'1','role':'后端','region':[9,73,719],'email':'fdbeegdabdecfga@qq.com','age':23,'rate':1,'flag':false,'phone':'13613097395','describe':'息户','describe2':'息户户用息用信信','describe3':'户户信用户息信信息户用信用息息信用息用户','seq':173,'date':1550321556114,'createTime':1549308520902,'updateTime':1550574590144,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':253,'name':'test_252','nickname':'名字_252','password':'EGcegACBDd','sex':'1','role':'设计','region':[19,199,1773],'email':'bcfadgdeegb@163.com','age':29,'rate':2,'flag':true,'phone':'13664286323','describe':'信用息用','describe2':'户息信户息用','describe3':'用户息息用信信信用用户户息户息信用','seq':252,'date':1549508546166,'createTime':1547819770738,'updateTime':1550557657350,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':189,'name':'name_188','nickname':'名字_188','password':'fBCgeAdEF','sex':'0','role':'后端','region':[19,199,1773],'email':'cedebffbda@qq.net','age':28,'rate':1,'flag':true,'phone':'13617819646','describe':'信用用','describe2':'用信户息息用用户','describe3':'用户用信户信用息息息户用用信户信信息户','seq':188,'date':1547748712261,'createTime':1550112474713,'updateTime':1550554275222,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null},{'id':244,'name':'name_243','nickname':'名字_243','password':'eECfFBG','sex':null,'role':'测试','region':[9,73,719],'email':'affbaacddb@qq.com','age':26,'rate':4,'flag':true,'phone':'13688615565','describe':'用信户','describe2':'用息户息信用信','describe3':'息户息户息信息信用户户户','seq':243,'date':1548052781945,'createTime':1550080461831,'updateTime':1550552435581,'attr1':null,'attr2':null,'attr3':null,'attr4':null,'attr5':null,'attr6':null}],
                formData: {
                    name: null,
                    sex: null,
                    role: null
                },
                pageVO: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 339
                },
                pendingRemoveList: []
            };
        },
        created () {
            /*this.findSexList();
            this.findRegionList();
            this.findList();*/
        },
        methods: {
            findList () {
                this.loading = true
                this.pendingRemoveList = []
                XEAjax.doGet(`/api/user/page/list/${this.pageVO.pageSize}/${this.pageVO.currentPage}`, this.formData).then(response => {
                    let { page, result } = response.data
                    this.list = result
                    console.log('list=' + JSON.stringify(result))
                    console.log('totalResult=' + JSON.stringify(page.totalResult))
                    this.pageVO.totalResult = page.totalResult
                    this.loading = false
                }).catch(e => {
                    this.loading = false
                })
            },
            findSexList () {
                return XEAjax.doGet('/api/conf/sex/list').then(({ data }) => {
                    this.sexList = data
                    console.log(JSON.stringify(data))
                    return data
                })
            },
            findRegionList () {
                return XEAjax.doGet('/api/conf/region/list').then(({ data }) => {
                    this.regionList = data
                    console.log('regionList=' + JSON.stringify(data))
                    return data
                })
            },
            searchEvent () {
                this.pageVO.currentPage = 1
                this.findList()
            },
            handleSizeChange (pageSize) {
                this.pageVO.pageSize = pageSize
                this.findList()
            },
            handleCurrentChange (currentPage) {
                this.pageVO.currentPage = currentPage
                this.findList()
            },
            formatterDate (row, column, cellValue, index) {
                return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
            },
            tableRowClassName ({ row, rowIndex }) {
                if (this.pendingRemoveList.some(item => item === row)) {
                    return 'delete-row'
                }
                return ''
            },
            filterHandler (value, row, column) {
                const property = column['property']
                return row[property] === value
            },
            insertEvent () {
                this.$refs.elxEditable.insert({
                    name: `New ${Date.now()}`,
                    age: 26,
                    flag: false
                }).then(({ row }) => {
                    this.$refs.elxEditable.setActiveRow(row)
                })
            },
            removeEvent (row) {
                if (row.id) {
                    MessageBox.confirm('确定永久删除该数据?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true
                        XEAjax.doDelete(`/api/user/delete/${row.id}`).then(({ data }) => {
                            this.findList()
                        }).catch(e => {
                            this.loading = false
                        })
                    }).catch(e => e)
                } else {
                    this.$refs.elxEditable.remove(row)
                }
            },
            pendingRemoveEvent () {
                let selection = this.$refs.elxEditable.getSelecteds()
                if (selection.length) {
                    let plus = []
                    let minus = []
                    selection.forEach(data => {
                        if (this.pendingRemoveList.some(item => data === item)) {
                            minus.push(data)
                        } else {
                            plus.push(data)
                        }
                    })
                    if (minus.length) {
                        this.pendingRemoveList = this.pendingRemoveList.filter(item => minus.some(data => data !== item)).concat(plus)
                    } else if (plus) {
                        this.pendingRemoveList = this.pendingRemoveList.concat(plus)
                    }
                    this.$refs.elxEditable.clearSelection()
                } else {
                    Message({
                        type: 'info',
                        message: '请至少选择一条数据！'
                    })
                }
            },
            deleteSelectedEvent () {
                let removeRecords = this.$refs.elxEditable.getSelecteds()
                if (removeRecords.length) {
                    MessageBox.confirm('确定删除所选数据?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true
                        XEAjax.doPost('/api/user/save', { removeRecords }).then(({ data }) => {
                            Message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.findList()
                        }).catch(e => {
                            this.loading = false
                        })
                    }).catch(e => e)
                } else {
                    Message({
                        type: 'info',
                        message: '请至少选择一条数据！'
                    })
                }
            },
            submitEvent () {
                this.$refs.elxEditable.validate(valid => {
                    if (valid) {
                        let removeRecords = this.pendingRemoveList
                        let { insertRecords, updateRecords } = this.$refs.elxEditable.getAllRecords()
                        if (insertRecords.length || updateRecords.length || removeRecords.length) {
                            insertRecords.forEach(item => {
                                if (XEUtils.isDate(item.date)) {
                                    item.date = item.date.getTime()
                                }
                            })
                            updateRecords.forEach(item => {
                                if (XEUtils.isDate(item.date)) {
                                    item.date = item.date.getTime()
                                }
                            })
                            this.loading = true
                            XEAjax.doPost('/api/user/save', { insertRecords, updateRecords, removeRecords }).then(({ data }) => {
                                Message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                this.findList()
                            }).catch(e => {
                                this.loading = false
                            })
                        } else {
                            Message({
                                type: 'info',
                                message: '数据未改动！'
                            })
                        }
                    }
                })
            },
            exportCsvEvent () {
                this.$refs.elxEditable.exportCsv()
            }
        }
    }
</script>

<style>
    .click-table2-oper {
        margin-bottom: 18px;
    }
    .click-table2 .delete-row {
        color: #f56c6c;
        text-decoration: line-through;
    }
    .click-table2-pagination {
        margin-top: 18px;
        text-align: right;
    }
    .click-table2.elx-editable .elx-editable-row.new-insert,
    .click-table2.elx-editable .elx-editable-row.new-insert:hover>td {
        background-color: #f0f9eb;
    }
</style>
